<template>
  <div>
    <p class="pinformation" style="margin-top: 7px">检测项目搜索条件</p>
    <el-form label-width="100" :model="form">
      <el-row>
        <el-col :span="7">
          <el-form-item label="检测项目：" label-width="80">
            <el-input v-model="form.jclbName" clearable placeholder="请输入检测项目"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="检测方法编号：">
            <el-input v-model="form.pointName" clearable placeholder="请输入检测方法编号"></el-input></el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="检测方法名称：">
            <el-input v-model="form.pointName" clearable placeholder="请输入检测方法名称"></el-input></el-form-item>
        </el-col>
        <el-col :span="5">
          <el-row justify="center">
            <el-button type="success" style="margin-left: 10px">搜索</el-button>
            <el-button class="resetBtn" style="margin-left: 10px">重置</el-button>
          </el-row>
        </el-col>
      </el-row>
    </el-form>
    <el-row style="margin-bottom: 5px">
      <p class="pinformation">检测项目列表</p>
      <p class="totalStyle">共 {{ tableData.length }} 条数据</p>
      <el-row style="padding-bottom: 5px; margin-left: 10px">
        <el-button link icon="Plus" @click="handleAdd">新增</el-button>
      </el-row>
    </el-row>
    <el-table :data="tableData" ref="mainTableRef">
      <el-table-column show-overflow-tooltip align="center" prop="jcxmName" label="检测项目" />
      <el-table-column show-overflow-tooltip align="center" prop="methodCode" label="方法编号" width="120" />
      <el-table-column show-overflow-tooltip align="center" prop="methodName" label="方法名称" width="160" />
      <el-table-column show-overflow-tooltip align="center" prop="desc" label="特别选项" />
      <el-table-column show-overflow-tooltip align="center" prop="jcxmGroup" label="检测项目组" width="100" />
      <el-table-column show-overflow-tooltip align="center" prop="isSend" label="是否求和" />
      <el-table-column show-overflow-tooltip align="center" prop="day" label="连测天数" />
      <el-table-column show-overflow-tooltip align="center" prop="pc" label="每天频次" />
      <el-table-column align="center" label="操作" width="100">
        <template #default="scope">
          <el-button link @click="handleAdd">编辑</el-button>
          <el-button link>删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :class="'el-dialog-theme3'" v-model="open" title="新增/编辑检测项目">
      <el-form ref="formRef" :model="addForm">
        <el-row>
          <el-col :span="12">
            <el-form-item label="当前点位：" prop="pointName">厂商南1号地下水点位</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="检测类别：" prop="jclbName">地下水</el-form-item>
          </el-col>
        </el-row>
        <p class="pinformation">检测项目列表</p>
        <el-row>
          <el-col :span="8">
            <el-form-item label="检测项目：" prop="jcxmName">
              <el-input v-model="addForm.jcxmName" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="检测方法编号：" prop="methodCode" label-width="120">
              <el-input v-model="addForm.methodCode" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="检测方法名称：" prop="methodName" label-width="120">
              <el-input v-model="addForm.methodName" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="特别选项：" prop="methodName">
              <el-input v-model="addForm.desc" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-row justify="center">
              <el-button type="success">添加</el-button>
            </el-row>
          </el-col>
        </el-row>
        <el-row>
          <p class="pinformation">拟新增检测项目列表</p>
          <p class="totalStyle">共 {{ addTable.length }} 条数据</p>
        </el-row>
        <el-table :data="addTable">
          <el-table-column show-overflow-tooltip align="center" prop="jcxmName" label="检测项目" />
          <el-table-column show-overflow-tooltip align="center" prop="methodCode" label="检测项目" />
          <el-table-column show-overflow-tooltip align="center" prop="methodName" label="方法名称" />
          <el-table-column show-overflow-tooltip align="center" prop="desc" label="特别选项" />
          <el-table-column label="操作" align="center" width="150">
            <template #default="scope">
              <el-button link>编辑</el-button>
              <el-button link>删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <p class="pinformation">同步添加到点位</p>
        <el-form-item label="点位名称：" prop="listbyPoint">
          <el-input v-model="addForm.listbyPoint" clearable></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="success" @click="open = false">确定</el-button>
          <el-button type="danger" @click="open = false">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
const { proxy } = getCurrentInstance();

const form = ref({});
const open = ref(false);
const tableData = ref([
  { jcxmName: 'PH', methodCode: 'HJ212-2009', methodName: 'dx', desc: '小时值', jcxmGroup: '苯系物', isSend: '是', day: '2', pc: '2' },
  { jcxmName: '苯', methodCode: 'HJ213-2009', methodName: '气体 参数检测XX方法', desc: '5', jcxmGroup: '苯系物', isSend: '否', day: '5', pc: '5' },
]);
const addTable = ref([
  { jcxmName: 'PH', methodCode: 'HJ212-2009', methodName: '张三', desc: '12' },
  { jcxmName: '甲烷', methodCode: 'HJ213-2009', methodName: 'Dx', desc: '5', },
]);
const addForm = ref({});

const heightParams = ref([{ tableName: "main", bottomHeight: 21 }]);

function handleAdd() {
  open.value = true;
}

function getTableHeight() {
  proxy.adaptiveHeight(proxy, heightParams.value);
}

onMounted(() => {
  nextTick(() => {
    getTableHeight();
    window.addEventListener("resize", getTableHeight);
  });
});
onUpdated(() => {
  nextTick(function () {
    getTableHeight();
  });
});
onBeforeUnmount(() => {
  window.removeEventListener("resize", getTableHeight);
});
</script>
